<template>
  <div class="show-dv" id="small"></div>
  <div class="video-box" ref="videoDv">
    <teleport to="#small" :disabled="show">
      <div id="mse"></div>
    </teleport>
  </div>
  <div v-for="(item, index) in arr.to" :key="index">
    {{ item.a + item.b}}
  </div>
  <button @click="go">去关于</button>
  <button @click="go2">登录</button>
  <button @click="go3">改变</button>
</template>
<script setup lang= 'ts'>
import { onMounted, reactive, ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useIntersection } from "@/hooks/useIntersectionObserver";
import Player from "xgplayer";
interface Arr {
  a: string;
  b: any;
}
let t = ref<string>('1')
const go3 = () => {
  arr.to.push({a:'222', b:'22333'})
  console.log(arr)
};
const show = ref(false);
const videoDv = ref(null);
const router = useRouter();
const arr = reactive<{to: Arr[]}>({
  to: [
    { a: "5", b: 2 },
    { a: "3", b: 4 },
  ],
});
const go = () => {
  router.push({
    path: "/about",
    query: {
      username: "周诺宝宝",
      password: 284552,
    },
  });
};
const go2 = () => {
  router.push({
    path: "/login",
    query: {
      username: "宝宝",
      password: 284552,
    },
  });
};

useIntersection(videoDv, show);
onMounted(() => {
  const player = new Player({
    width: "100%",
    height: "100%",
    id: "mse",
    url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
    poster: require("@/assets/family.png"),
    // autoplay: true
  });
});
</script>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
  name: "HelloWorld",
});
</script>
<style scoped lang="scss">
.video-box {
  width: 800px;
  height: 500px;
}
.show-dv {
  width: 400px;
  height: 300px;
  position: fixed;
  bottom: 50px;
  right: 40px;
  // background-color: blue;
}
</style>